<script setup lang="ts">
import { reactive } from 'vue';

import { ElButton } from 'element-plus';

defineOptions({
  name: 'HomeDemo',
});
const emits = defineEmits(['api']);
const demo = reactive({
  desc: '这是一个示例APP，用于一些交互相关功能的实现',
  title: 'tOS WebUI',
});

const closeApp = () => {
  emits('api', {
    app: 'system_about',
    event: 'closeApp',
  });
};
const openApp = () => {
  emits('api', {
    app: 'system_about',
    event: 'openApp',
  });
};
const openAppWithData = () => {
  emits('api', {
    app: 'demo_colorfull',
    data: '我是传入的参数',
    event: 'openApp',
  });
};
const setWindowTitle = () => {
  emits('api', {
    event: 'setWindowTitle',
    title: Date.now(),
  });
};
const windowClose = () => {
  emits('api', {
    event: 'windowClose',
  });
};
const windowFullSize = () => {
  emits('api', {
    event: 'windowFullSize',
  });
};
const windowMaxSize = () => {
  emits('api', {
    event: 'windowMaxSize',
  });
};
const windowMinSize = () => {
  emits('api', {
    event: 'windowMinSize',
  });
};
const windowNormalSize = () => {
  emits('api', {
    event: 'windowNormalSize',
  });
};
</script>

<template>
  <div class="demo">
    <div class="top">
      <i class="iconfont icon-apple1"></i>
      <div class="info">
        <div class="title">{{ demo.title }}</div>
        <div class="desc">{{ demo.desc }}</div>
      </div>
    </div>
    <div class="body">
      <ElButton size="small" type="primary" @click="windowMaxSize">
        窗口最大化
      </ElButton>
      <ElButton size="small" type="primary" @click="windowNormalSize">
        普通窗口
      </ElButton>
      <ElButton size="small" type="primary" @click="windowMinSize">
        窗口最小化
      </ElButton>
      <ElButton size="small" type="primary" @click="windowClose">
        关闭当前窗口
      </ElButton>
      <ElButton size="small" type="primary" @click="windowFullSize">
        窗口全屏
      </ElButton>
      <ElButton size="small" type="primary" @click="openApp">
        打开某app
      </ElButton>
      <ElButton size="small" type="primary" @click="closeApp">
        关闭某app
      </ElButton>
      <ElButton size="small" type="primary" @click="setWindowTitle">
        修改窗口标题
      </ElButton>
      <ElButton size="small" type="primary" @click="openAppWithData">
        带参打开App
      </ElButton>
    </div>
  </div>
</template>
<style scoped lang="scss">
.demo {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  font-weight: 300;
  color: #333;
  text-shadow: none;

  .top {
    display: flex;
    flex-direction: row;
    padding: 20px;

    .info {
      flex-grow: 1;

      .title {
        font-size: 24px;
      }

      .desc {
        font-size: 14px;
        color: #999;
      }
    }

    .iconfont {
      margin-right: 20px;
      font-size: 48px;
    }
  }

  .body {
    padding: 20px;

    button {
      display: inline-block;
      margin: 5px;
    }
  }
}
</style>
